<template>
  <v-card class="h-screen" elevation="1">
    <ConfirmDialog
      v-model:visible="dialogVisible"
      :config="dialogConfig"
      @close="dialogVisible = false"
      @confirm="handleConfirm"
    />
    <v-main class="h-full mx-auto overflow-y-auto custom-scrollbar">
      <v-container fluid>
        <div class="text-center mb-4">
          <img
            class="h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32 rounded-full inline-block"
            src="@/assets/images/logo35.svg"
            alt="Logo"
          />
        </div>
        <!-- Applicant Info -->
        <v-row class="mb-2">
          <v-col cols="12" sm="6" class="text-left text-sm-center">
            <span class="font-semibold">Applicant:</span>
            <span class="ml-2 text-indigo-600">{{ essay.name }}</span>
          </v-col>
          <v-col cols="12" sm="6" class="text-left text-sm-center">
            <span class="font-semibold">Date:</span>
            <span class="ml-2 text-indigo-600">{{ essay.date }}</span>
          </v-col>
        </v-row>

        <!-- Essay Title -->
        <v-row class="mb-4 justify-center">
          <v-col cols="12" sm="11" md="11" lg="11">
            <div class="text-sm flex items-start">
              <div class="font-semibold whitespace-nowrap">Essay Title:</div>
              <div class="ml-2 text-indigo-600 text-left flex-grow">
                {{ essay.title }}
              </div>
            </div>
          </v-col>
        </v-row>

        <v-row class="justify-center">
          <v-col cols="12" sm="11" md="11" lg="11">
            <v-textarea
              v-model="essay.content"
              :rules="contentRules"
              rows="20"
              variant="outlined"
              auto-grow
              counter
              required
            ></v-textarea>
          </v-col>
        </v-row>
      </v-container>
      <v-container>
        <div class="flex justify-center mb-4">
          <v-btn
            :disabled="!isValid"
            class="mr-4"
            color="darkprimary"
            @click="handleSave"
          >
            Save
          </v-btn>
          <v-btn
            :disabled="!isValid"
            color="darksecondary"
            @click="handleSubmit"
          >
            Submit
          </v-btn>
        </div>
        <p class="text-center text-red-500 text-sm mb-4">
          If you can see the content of this form when you reopen it and also
          can't click "Save" or "Submit" button, it means the essay has been
          submitted successfully.
        </p>
      </v-container>
    </v-main>
  </v-card>
</template>

<script setup lang="ts">
import ConfirmDialog from '@/components/ConfirmDialog.vue';
import type { ConfirmDialogConfig } from '@/types/comps/ConfirmDialogConfig';
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import axios from '@/utils/axiosConfig';

const essay = reactive({
  name: 'Teaya Taylor',
  date: '6/13/2024 10:02:49 PM',
  title:
    "I feel being a great custodian/janitor is making sure the establishment is germ free for staff and students. So many germs are contracted through school, being kids pass it to one another. If im able to keep your school and our community a little less contaminated with germs I'll always sign up to keep our kids safe and clean.",
  content: '',
});

const contentLen = { min: 500, max: 5000 };
const isValid = computed(() =>
  contentRules.every((rule) => rule(essay.content) === true)
);

const contentRules = [
  (v: string) => !!v || 'This field is required',
  (v: string) =>
    v.length >= contentLen.min || `Min ${contentLen.min} characters`,
  (v: string) =>
    v.length <= contentLen.max || `Max ${contentLen.max} characters`,
];

const dialogVisible = ref(false);
const dialogConfig: Partial<ConfirmDialogConfig> = {};

onMounted(async () => {
  const route = useRoute();
  const rid = route.params.rid as string;
  const pid = route.params.pid as string;

  console.log(rid, pid);
  await fetchData();
});

const fetchData = async () => {
  try {
    const response = await axios.get('/api3/token/token?name=1&pass=2');
    console.log(response.data);
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
};

const handleSave = () => {
  if (isValid.value) {
    console.log('Save clicked');
    // 实现保存逻辑
  }
};

const handleSubmit = () => {
  if (isValid.value) {
    dialogVisible.value = true;
  }
};

const handleConfirm = () => {
  dialogVisible.value = false;
  console.log('Form submitted!');
  // 实现提交逻辑
};
</script>

<style scoped>
::-webkit-scrollbar {
  width: 12px; /* 滚动条宽度 */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道颜色 */
}

::-webkit-scrollbar-thumb {
  background: #90ae63; /* 滑块颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background: #2e8e46; /* 滑块悬停颜色 */
}
</style>
